"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"
import { Sprout, Thermometer, Droplets, Sun, TrendingUp, AlertTriangle } from "lucide-react"

interface ExperimentData {
  id: number
  experimentName: string
  cropType: string
  customCrop?: string
  collector: string
  location: string
  date: string
  temperature: string
  humidity: string
  soilMoisture: string
  lightIntensity: string
  notes: string
  files: File[]
  status: string
  createdAt: string
}

interface DashboardProps {
  experimentData: ExperimentData[]
}

const stats = [
  { title: "实验项目", value: "24", change: "+12%", icon: Sprout, color: "text-chart-1" },
  { title: "数据采集点", value: "156", change: "+8%", icon: Thermometer, color: "text-chart-2" },
  { title: "活跃传感器", value: "89", change: "+5%", icon: Droplets, color: "text-chart-3" },
  { title: "数据完整性", value: "98.5%", change: "+2%", icon: TrendingUp, color: "text-chart-4" },
]

const recentExperiments = [
  { name: "玉米抗旱性研究", status: "进行中", progress: 75, location: "试验田A区" },
  { name: "小麦营养成分分析", status: "已完成", progress: 100, location: "试验田B区" },
  { name: "水稻病虫害监测", status: "进行中", progress: 45, location: "试验田C区" },
  { name: "大豆生长周期观察", status: "准备中", progress: 15, location: "试验田D区" },
]

const alerts = [
  { type: "warning", message: "试验田A区土壤湿度偏低", time: "2小时前" },
  { type: "info", message: "数据采集设备B-03需要维护", time: "4小时前" },
  { type: "success", message: "玉米抗旱性实验第三阶段完成", time: "1天前" },
]

export function Dashboard({ experimentData }: DashboardProps) {
  // TODO: 将来会使用 experimentData 来显示实际数据
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const _unused = experimentData
  return (
    <div className="space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        {stats.map((stat) => {
          const Icon = stat.icon
          return (
            <Card key={stat.title}>
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">{stat.title}</CardTitle>
                <Icon className={`h-4 w-4 ${stat.color}`} />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">{stat.value}</div>
                <p className="text-xs text-muted-foreground">
                  <span className="text-chart-1">{stat.change}</span> 较上月
                </p>
              </CardContent>
            </Card>
          )
        })}
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <Card>
          <CardHeader>
            <CardTitle>最近实验项目</CardTitle>
            <CardDescription>当前进行中的实验项目状态</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            {recentExperiments.map((experiment, index) => (
              <div key={index} className="flex items-center justify-between space-x-4">
                <div className="flex-1 space-y-1">
                  <p className="text-sm font-medium leading-none">{experiment.name}</p>
                  <p className="text-xs text-muted-foreground">{experiment.location}</p>
                </div>
                <div className="flex items-center space-x-2">
                  <Badge
                    variant={
                      experiment.status === "已完成"
                        ? "default"
                        : experiment.status === "进行中"
                          ? "secondary"
                          : "outline"
                    }
                  >
                    {experiment.status}
                  </Badge>
                  <div className="w-20">
                    <Progress value={experiment.progress} className="h-2" />
                  </div>
                  <span className="text-xs text-muted-foreground w-10">{experiment.progress}%</span>
                </div>
              </div>
            ))}
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>系统提醒</CardTitle>
            <CardDescription>重要通知和警报信息</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            {alerts.map((alert, index) => (
              <div key={index} className="flex items-start space-x-3">
                <AlertTriangle
                  className={`h-4 w-4 mt-0.5 ${
                    alert.type === "warning"
                      ? "text-destructive"
                      : alert.type === "info"
                        ? "text-chart-3"
                        : "text-chart-1"
                  }`}
                />
                <div className="flex-1 space-y-1">
                  <p className="text-sm">{alert.message}</p>
                  <p className="text-xs text-muted-foreground">{alert.time}</p>
                </div>
              </div>
            ))}
          </CardContent>
        </Card>
      </div>

      <Card>
        <CardHeader>
          <CardTitle>环境监测概览</CardTitle>
          <CardDescription>实时环境数据监测</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div className="flex items-center space-x-3">
              <Thermometer className="h-8 w-8 text-chart-4" />
              <div>
                <p className="text-2xl font-bold">25.6°C</p>
                <p className="text-sm text-muted-foreground">平均温度</p>
              </div>
            </div>
            <div className="flex items-center space-x-3">
              <Droplets className="h-8 w-8 text-chart-2" />
              <div>
                <p className="text-2xl font-bold">68%</p>
                <p className="text-sm text-muted-foreground">土壤湿度</p>
              </div>
            </div>
            <div className="flex items-center space-x-3">
              <Sun className="h-8 w-8 text-chart-3" />
              <div>
                <p className="text-2xl font-bold">850 lux</p>
                <p className="text-sm text-muted-foreground">光照强度</p>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
